<template>
	<view class="logins">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="title"></nav-bars>
		<view class="card">
		    <view class="card_name">收货姓名</view>
		    <input  class="price_input" type="text" placeholder="输入收货人姓名" v-model="name"></input>
		</view>
		<view class="card">
		    <view class="card_name">手机号码</view>
		    <input class="price_input"  placeholder="输入收货人手机号码" type="number" v-model="mobile"></input>
		</view>
		<view class="card">
		    <view class="card_name">选择区域</view>
		    <!-- <picker @change="pickerChange" @columnchange="bindMultiPickerColumnChange" id="address" mode="region" value="">
		            {{regionStr ||'选择地区'}}
		      </picker> -->
			<biaofun-region :defaultValue="defaultValue" @change="onChangeRegion"></biaofun-region>  
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">详细地址</view>
		    <input  class="price_input" type="text"   placeholder="详细地址 如：街道、门牌号等" v-model="address"></input>
		</view>
		<view class="line"></view>
		<view class="radio-cell">
		    <label class="radio">
		        <radio @click="radioChange" :checked="is_default==1" color="#C3AB7C" :data-checked="is_default"></radio>设为默认地址
		    </label>
		</view>
		<view @click="submitAddress" v-if="!id" class="bnt">保存</view>
		<view @click="editAddress" v-if="id" class="bnt">保存修改</view>
		<view @click="deleteAddress" class="bnt-delete" v-if="id">删除地址</view>
	</view>
</template>

<script>
import service_enter from '@/service/address.js'
import URL from '@/config/url.js'
import biaofunRegion from '../../../components/biaofun-region/biaofun-region.vue';

export default {
	components: {biaofunRegion},
	
	data() {
		return {
			title:'',
			regionStr: '',
			id:'',
			name: '',
			mobile: '',
			address: '',
			province: '',
			city:'',
			area:'',
			is_default: '1',
			showCitySel: false,
			addressDatas: {
				loading: false,
				fail: false,
				list: []
			},
			sourceFrom: '',
			isSelect: '',
			type:'',
			defaultValue: ['广西壮族自治区', '桂林市', '叠彩区'], // 默认值
		}
	},
	mounted() {
		this.getdata()
	},
	onLoad(option) {
		if(option.type){
			this.type = option.type
		}
		if(option.id){
			this.id = option.id
			this.getdata()
			this.isRevise = true
			this.title = "修改地址"
		}else{
			this.title = "新增地址"
		}
		if(option.sourceFrom){
			this.sourceFrom = option.sourceFrom;
		}
		if(option.isSelect){
			this.isSelect = option.isSelect;
		}
	},
	methods: {
		onChangeRegion(region) {
			this.province = region[0].name,
			this.city= region[1].name,
			this.area = region[2].name
		},
		// 查询地址详情
		getdata() {
			if(this.id !=''){
				service_enter.getdeatil({
					address_id:this.id
				}).then(res => {
					if(res.code == 1){
						this.name = res.data.name
						this.mobile = res.data.mobile
						this.address = res.data.address
						this.province = res.data.province
						this.city = res.data.city 
						this.area = res.data.area
						let addcity = res.data.province + "," + res.data.city  + "," + res.data.area
						this.defaultValue = addcity.split(',')
						this.is_default = res.data.is_default
						this.id = res.data.id
					}else{
						
					}
				})
			}
			
		},
		// pickerChange(t) {
		// 	this.province = t.detail.value[0],
		// 	this.city= t.detail.value[1],
		// 	this.area = t.detail.value[2],
		// 	this.regionStr = t.detail.value.join(" ")
		// },
		// 删除地址
		deleteAddress() {
		        var t = this;
		        uni.showModal({
		            title: "提示！",
		            content: "是否删除该地址？",
		            success: function(s) {
		                if (s.confirm) {
		                    uni.showLoading({
		                        title: "删除中"
		                    });
		                    service_enter.getdel({
								address_id_lst:t.id
		                    }).then(res => {
								if(res.code == 1){
									uni.showToast({
									  title: "删除成功！",
									  icon: "none"
									});
									   // uni.navigateTo({
									   // 	url: "/pages_now/pages/my/address/list?sourceFrom=" + t.sourceFrom+ "&isSelect=" + t.isSelect + '&type=' + t.type,      
									   // });	
									uni.navigateBack({
										delta:1
									})
								}else{
									
								}
							})
		                }
		            }
		        });
		    },
		// 添加地址
		submitAddress() {
			if(!this.province){
			  	this.province = this.defaultValue[0],
			  	this.city= this.defaultValue[1],
			  	this.area = this.defaultValue[2]
			}
			if (!this.name) return uni.showToast({title: "请填写收货人名称", icon: "none"});
			if (!this.mobile) return uni.showToast({title: "请填写收货人号码", icon: "none"});
			if (!this.isPhone(this.mobile)) return uni.showToast({title: "号码格式不对", icon: "none"});
			if (!this.address) return  uni.showToast({title: "请填写详细地址", icon: "none"});
			uni.showLoading('添加地址中')
            service_enter.getadd({
					name: this.name,
					mobile: this.mobile,
					address: this.address,
					province: this.province,
					city:this.city,
					area:this.area,			
					is_default: this.is_default			
		        }).then(res => {
				uni.hideLoading();
				if(res.code == 1){
					var t = this;
					uni.showModal({
					    title: "提示！",
						content: "添加地址成功",
						showCancel: !0,
						confirmText: "知道了",
						showCancel:false,
						confirmColor: "#87ceeb",
					    success: function (res) {
					        if (res.confirm) {
					              uni.navigateTo({
					              	url: "/pages_now/pages/mall/address/list?sourceFrom=" + t.sourceFrom+ "&isSelect=" + t.isSelect + '&type=' + t.type,      
					              });	
					        } 
					    }
					});	
				}else{
		          uni.showToast({
		            title: res.msg,
		            icon: "none"
		          });
				}
			}).catch(err=>{
				
			})
		},
		editAddress(){
			if (!this.name) return uni.showToast({title: "请填写收货人名称", icon: "none"});
			if (!this.mobile) return uni.showToast({title: "请填写收货人号码", icon: "none"});
			if (!this.isPhone(this.mobile)) return uni.showToast({title: "号码格式不对", icon: "none"});
			if (!this.province) return  uni.showToast({title: "请选择区域", icon: "none"});
			if (!this.address) return  uni.showToast({title: "请填写详细地址", icon: "none"});
			uni.showLoading('修改地址中')
			service_enter.getedit({
					name: this.name,
					mobile: this.mobile,
					address: this.address,
					province: this.province,
					city:this.city,
					area:this.area,			
					is_default: this.is_default,
					address_id:this.id
			    }).then(res => {
				uni.hideLoading();
				if(res.code == 1){
					var t = this;
					uni.showModal({
					    title: "提示！",
						content: "修改地址成功",
						showCancel: !0,
						confirmText: "确定",
						confirmColor: "#87ceeb",
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					            	url: '/pages_now/pages/mall/address/list?sourceFrom=' + t.sourceFrom+ "&isSelect=" + t.isSelect + '&type=' + t.type,
					            });
					        } 
					    }
					});	
				}else{
			      uni.showToast({
			        title: res.message,
			        icon: "none"
			      });
				}
			}).catch(err=>{
				
			})
		},
		isPhone(t) {
		        return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
		 },
		radioChange(t) {
			if(t.currentTarget.dataset.checked == 0){
				this.is_default = 1
			}else{
				this.is_default = 0
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.logins{
		width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
	}
.card {
	    padding: 10rpx;
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    margin: 20rpx;
	}
	
	.card_name {
	    flex-shrink: 0;
	    padding-right: 60rpx;
	}
	
	.price_input {
	    width: 100%;
	    font-size: 28rpx;
	}
	picker{
		width: 100%;
	}
	.cell_c,.cell navigator {
	    margin: 20rpx;
	    padding: 20rpx 0 20rpx 20rpx;
	    font-size: 32rpx;
	    display: flex;
	    align-items: center;
	}
	
	.cell_c picker {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		line-height: 25px;
		padding-left: 54rpx;
		height: 46rpx;
		text-align: left;
	}
	
	.cell_name {
	    flex-shrink: 0;
	}
	
	.line {
	    padding: 10rpx;
	    background-color: #f6f6f6;
	}
	
	.radio-cell {
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #999;
	}
	
	.bnt {
	    background-color: #C3AB7C;
	    color: #fff;
		
	}
	
	.bnt,.bnt-delete {
	    padding: 20rpx 20rpx;
	    margin: 20rpx;
	    text-align: center;
	    border-radius: 40rpx;
	}
	
	.bnt-delete {
	    background-color: #f6f6f6;
	}
biaofun-region{
	width:100%;
}		
</style>